<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!-- 添加/编辑分类 -->
      <el-col :xs="24" :sm="10">
        <el-card>
          <div slot="header">{{ addOrUpdateData.id ? '修改' : '添加' }}分类</div>
          <el-form ref="categoryForm" label-position="top" :model="addOrUpdateData" size="small">
            <el-form-item label="名称：" prop="name">
              <el-input v-model="addOrUpdateData.name"/>
            </el-form-item>
            <el-form-item label="描述：" prop="description" show-overflow-tooltip>
              <el-input v-model="addOrUpdateData.description" :rows="3" type="textarea"/>
            </el-form-item>
            <el-form-item>
              <el-button-group>
                <el-button type="primary" @click="saveCategory">
                  {{ addOrUpdateData.id ? '更 新' : '保 存' }}
                </el-button>
                <el-button v-if="addOrUpdateData.id" @click="resetForm">返回添加</el-button>
              </el-button-group>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <!-- 分类列表 -->
      <el-col :xs="24" :sm="14">
        <el-card>
          <div slot="header">分类列表</div>
          <el-table
              ref="blogListTable"
              v-loading="tableDataLoading"
              :data="categoryList"
              tooltip-effect="dark"
              :header-cell-style="{fontWeight:'normal', color:'#666'}"
          >
            <el-table-column prop="name" label="名称" width="148"/>
            <el-table-column prop="blogCount" label="文章数" width="80" align="center"/>
            <el-table-column prop="description" label="描述"/>
            <el-table-column label="操作" width="136">
              <template slot-scope="scope">
                <el-button-group>
                  <el-button type="primary" size="mini" @click="tryUpdate(scope.$index)">编辑</el-button>
                  <el-popconfirm
                      placement="top-start"
                      confirm-button-text="确定"
                      cancel-button-text="取消"
                      icon="el-icon-info"
                      icon-color="red"
                      :title="`您要永久删除分类【${scope.row.name}】吗？`"
                      @confirm="deleteCategory(scope.$index)"
                  >
                    <el-button slot="reference" type="danger" size="mini">删除</el-button>
                  </el-popconfirm>
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
          <div class="clearfix">
            <div class="pagination ">
              <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[5,10,20]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
              </el-pagination>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {saveCategory, deleteCategoryById, getCategoryList} from "@/api/blog/category";

export default {
  name: "Category",
  data() {
    return {
      addOrUpdateData: {},
      tableDataLoading: false,
      categoryList: [],
      total: 0,
      pageSize: 5,
      currentPage: 1
    }
  },
  created() {
    this.getCategoryList()
  },
  methods: {
    getCategoryList() {
      this.tableDataLoading = true
      const params = {
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }
      getCategoryList(params).then(res => {
        this.categoryList = res.data.records
        this.currentPage = res.data.current
        this.pageSize = res.data.size
        this.total = res.data.total
        this.tableDataLoading = false
      })
    },
    tryUpdate(index) {
      this.addOrUpdateData = JSON.parse(JSON.stringify(this.categoryList[index]))
    },
    operationSuccess(msg) {
      this.$message.success(msg)
      this.getCategoryList()
      this.resetForm()
    },
    //添加更新分类
    saveCategory() {
      const data = this.addOrUpdateData
      saveCategory(data).then(res => {
        this.operationSuccess(res.message)
      }).catch(err => {
      })
    },
    resetForm() {
      this.addOrUpdateData = {name: '', description: ''}
    },
    deleteCategory(index) {
      const id = this.categoryList[index].id
      deleteCategoryById(id).then(res => {
        this.operationSuccess(res.message)
      }).catch(err => {
      })
    },
    handleSizeChange() {
    },
    handleCurrentChange() {
    },

  }
}
</script>

<style scoped>

</style>
